<template>
  <div>
    <!--    左边的树-->
    <!-- <el-col :span="4">
      <el-card shadow="always" class="box-card" style="height:100%">
        <div slot="header" class="clearfix">
          <em class="el-icon-menu">角色管理</em>
        </div>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
      </el-card>

    </el-col>

    -->
    <!--右边主体部分-->
    <el-col :span="20">
      <el-card shadow="always" style="margin-left: 3px">
        <!--搜索框-->
        <el-row style="margin-left: 7px; margin-top: 7px">
          <div id="search">
            <el-form :inline="true">
              <el-form-item label="角色名称">
                <el-input
                  v-model="roleQuery.name"
                  placeholder="请输入角色名称"
                />
              </el-form-item>
              <el-button
                style="margin-left: 5px"
                type="primary"
                @click="queryRoleByName"
              >查询</el-button>
            </el-form>
          </div>
        </el-row>
        <!--上方操作链接-->
        <div style="margin-bottom: 20px; margin-top: -0px">
          <el-button
            style="margin-left: 5px"
            type="primary"
            @click=";(adddialogVisible = true), (roleDto.status = 1)"
          ><em class="el-icon-plus">增加</em></el-button>
          <el-button
            style="margin-left: 5px"
            type="danger"
            @click="batchRemoveRole"
          ><em class="el-icon-delete">删除</em></el-button>
          <el-button
            style="margin-left: 5px"
            type="primary"
            @click="refreshData"
          ><em class="el-icon-refresh">刷新</em></el-button>
          <el-button
            style="margin-left: 5px"
            type="primary"
            @click="getResourceTree"
          ><em class="el-icon-video-play" />资源分配</el-button>
          <el-button
            style="margin-left: 5px"
            type="primary"
            @click="getUserAll"
          ><em class="el-icon-s-custom">用户分配</em></el-button>
        </div>
        <!--主体表格-->
        <el-table
          ref="roleTable"
          v-loading="listLoading"
          :data="tableData"
          highlight-current-row
          style="width: 100%; margin-top: 10px"
          border
          height="600px"
          @row-dblclick="updateFromInfo"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column label="角色" width="126" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="角色编号" align="center">
            <template slot-scope="scope">
              {{ scope.row.code }}
            </template>
          </el-table-column>
          <el-table-column
            label="角色备注"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="所属公司" align="center">
            <template slot-scope="scope">
              {{ scope.row.companyDTO.name }}
            </template>
          </el-table-column>
          <el-table-column label="所属机构" align="center">
            <template slot-scope="scope">
              {{ scope.row.organizationDTO.name }}
            </template>
          </el-table-column>
          <el-table-column label="启用" align="center">
            <template slot-scope="scope">
              <el-tag size="mini" type="success">
                {{ scope.row.status === 1 ? '启用' : '停用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="250">
            <template slot-scope="scope">
              <div>
                <el-button
                  style="margin-left: 5px"
                  size="mini"
                  type="primary"
                  @click="copyRole(scope.row)"
                >复制</el-button>
                <el-button
                  style="margin-left: 5px"
                  size="mini"
                  @click="updateFromInfo(scope.row)"
                >编辑</el-button>
                <el-button
                  style="margin-left: 5px"
                  size="mini"
                  type="danger"
                  @click="removeRole(scope.row)"
                >删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条-->
        <el-pagination
          :v-model="rolePage"
          :current-page.sync="rolePage.pageNum"
          :page-size="rolePage.pageSize"
          :page-sizes="[10, 15, 20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next, jumper"
          :total="rolePage.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-col>
    <!--  增加的弹框-->
    <sd-FormDialog
      :caption="addTitle"
      :visible="adddialogVisible"
      :model="roleDto"
      :rules="rules"
      width="60%"
      @OkButtonClick="addRole"
      @CancelButtonClick="adddialogVisible = false"
    >
      <el-row>
        <el-col :span="11">
          <el-form-item :span="12" label="角色名称" prop="name">
            <el-input v-model="roleDto.name" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="角色代码" prop="code">
            <el-input v-model="roleDto.code" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="角色备注" prop="remark">
            <el-input v-model="roleDto.remark" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="是否启用">
            <template>
              <el-radio v-model="roleDto.status" :label="1">是</el-radio>
              <el-radio v-model="roleDto.status" :label="0">否</el-radio>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </sd-FormDialog>
    <!--    更新的弹框-->
    <sd-FormDialog
      :caption="updateTitle"
      :visible="updatedialogVisible"
      :model="roleDto"
      :rules="rules"
      width="60%"
      @OkButtonClick="updateRole"
      @CancelButtonClick="updatedialogVisible = false"
    >
      <el-row>
        <el-col :span="11">
          <el-form-item :span="12" label="角色名称" prop="name">
            <el-input v-model="roleDto.name" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="角色代码" prop="code">
            <el-input v-model="roleDto.code" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="角色备注" prop="remark">
            <el-input v-model="roleDto.remark" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="是否启用">
            <template>
              <el-radio v-model="roleDto.status" :label="1">是</el-radio>
              <el-radio v-model="roleDto.status" :label="0">否</el-radio>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </sd-FormDialog>
    <!--用户分配的弹框-->
    <el-dialog
      title="用户分配"
      :visible.sync="userdialogVisible"
      width="60%"
      length="100%"
      :before-close="handleClose"
    >
      <el-form :inline="true">
        <el-form-item label="用户名称：">
          <el-input v-model="userQuery.name" placeholder="请输入用户名称" />
        </el-form-item>
        <el-button
          style="margin-left: 5px"
          type="primary"
          @click="queryUserByName"
        >查询</el-button>
      </el-form>
      <el-table
        ref="userTable"
        v-loading="listLoading"
        :data="userData"
        selectable
        highlight-current-row
        height="350"
        style="width: 100%"
      >
        <el-table-column type="selection" />
        <el-table-column label="用户工号" align="center">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条-->
      <el-pagination
        :v-model="userPage"
        :current-page.sync="userPage.pageNum"
        :page-size="userPage.pageSize"
        layout="total,prev, pager, next, jumper"
        :total="userPage.total"
        @current-change="handleUserDataChange"
      />
      <el-button
        style="margin-left: 30px"
        @click="userdialogVisible = false"
      >取 消</el-button>
      <el-button type="primary" @click="assignUser">确 定</el-button>
    </el-dialog>
    <!--资源分配的弹框-->
    <el-dialog
      ref="tree"
      title="请填写："
      :visible.sync="resourcedialogVisible"
      width="60%"
      length="100%"
      :before-close="handleClose"
    >
      <div style="overflow: auto; overflow-y: auto">
        <el-card shadow="always" class="box-card" style="overflow: auto">
          <el-tree
            ref="tree"
            node-key="id"
            show-checkbox
            :data="resourceData"
            @node-click="handleNodeClick"
          />
        </el-card>
      </div>

      <el-button @click="resourcedialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="assignResource">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  add,
  remove,
  batchRemove,
  modify,
  copy,
  commonQuery,
  // queryRoleById,
  commonQueryUser,
  assignUser,
  selectCompany,
  assignResource
} from '@/api/right/role'

import { treeQuery } from '@/api/right/resource'

// import { FormDialog } from '../../../components/SD365UI'
// import dialogDrag from '../../../utils/dialogdrap'
export default {
  name: 'Role',
  data: function() {
    return {
      addTitle: '增加角色',
      updateTitle: '修改角色',
      userTitle: '用户分配',
      resourceTitle: '资源分配',
      data: [],
      treeData: [],
      resourceData: [],
      // defaultProps: {
      //   children: 'children',
      //   label: 'name'
      // },
      listLoading: false,
      tableData: [],
      userData: [],
      rolePage: {
        total: null,
        // 页号
        pageNum: 1,
        // 页大小
        pageSize: 10,

        pages: null
      },
      userPage: {
        total: null,
        // 页号
        pageNum: 1,
        // 页大小
        pageSize: 10,

        pages: null
      },
      roleQuery: { companyId: '' },
      userQuery: {},
      roleResourceDTO: {},
      userdialogVisible: false,
      resourcedialogVisible: false,
      // userData: null,
      // resourceTree: [],
      // resourceData: null,
      // userIdList: [],
      // resourceId: [],
      rules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '角色编号不能为空', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        companyId: [
          { required: true, message: '所属公司不能为空', trigger: 'change' }
        ]
      },
      adddialogVisible: false,
      updatedialogVisible: false,
      roleDto: {
        name: '',
        code: '',
        remark: '',
        id: '',
        status: '',
        version: '',
        created_by: '',
        companyId: '',
        tenantId: '',
        orgId: ''
      },
      roleIdList: [],
      userIdList: [],
      resourceIdList: [],
      selected: '' // 被选中的行
    }
  },
  created() {
    this.fetchData(this.rolePage.pageNum)
    this.getCompany()
  },
  methods: {
    transform(list) {
      // var map = {}; var node; var tree = []; var i
      var tree = []
      // var firstNode = []
      // var secondNode = []
      // 存储一级节点（系统）
      list.map((item) => {
        if (parseInt(item.parentId) === -1 && item.resourceType === 2) {
          tree.push({ label: item.name, id: item.id, children: [] })
        }
      })
      // 存储二级节点（主菜单）
      tree.map((itemParent) => {
        list.map((item) => {
          if (itemParent.id === item.parentId) {
            itemParent.children.push({
              id: item.id,
              label: item.name,
              children: []
            })
          }
        })
      })
      // 存储三级节点（子菜单）
      tree.map((itemParent) => {
        itemParent.children.map((itemSecondParent) => {
          list.map((item) => {
            if (itemSecondParent.id === item.parentId) {
              itemSecondParent.children.push({
                id: item.id,
                label: item.name,
                children: []
              })
            }
          })
        })
      })
      // 存储四级节点（请求权限）
      tree.map((itemParent) => {
        itemParent.children.map((itemSecondParent) => {
          itemSecondParent.children.map((itemthirdParent) => {
            list.map((item) => {
              if (itemthirdParent.id === item.parentId) {
                itemthirdParent.children.push({ id: item.id, label: item.name })
              }
            })
          })
        })
      })
      // list.map(item => {
      //   if (parseInt(item.parentId) === 1 && item.resourceType === 0) {
      //     tree.push({ label: item.name, id: item.id, children: [] })
      //   }
      // })
      // 存储二级节点
      // list.map(item => {
      //   tree.map(itemParent => {
      //     if (itemParent.id === item.parentId) {
      //
      //       itemParent.children.push({ id: item.id, label: item.name })
      //     }
      //   })
      // })
      // tree.map(itemParent => {
      //   list.map(item => {
      //     if (itemParent.id === item.parentId) {
      //       itemParent.children.push({ id: item.id, label: item.name })
      //     }
      //   })
      // })
      // console.log(tree)

      // for (i = 0; i < list.length; i++) {
      //   map[list[i].id] = list[i]
      //   list[i].children = []
      // }
      // for (i = 0; i < list.length; i += 1) {
      //   node = list[i]
      //   if (node.parentId !== '-1') {
      //     map[node.parentId].children.push(node)
      //   } else {
      //     tree.push(node)
      //   }
      // }
      return tree

      // let map = {};
      // data.forEach(item => {
      //     if (! map[item.id]) {
      //         map[item.id] = item;
      //     }
      // });

      // data.forEach(item => {
      //     if (item.parentId != -1) {
      //         map[item.parentId].children ? map[item.parentId].children.push(item) : map[item.parentId].children = [item];
      //     }
      // });

      // return data.filter(item => {
      //     return item.parentId == -1
      // })
    },
    handleNodeClick(data) {
      // this.roleQuery.companyId = data.id
      // this.fetchData(1)
      // this.roleQuery = {}
    },
    /**
     * 分页逻辑
     *
     */
    handleSizeChange(val) {
      this.rolePage.pageSize = val
      this.fetchData(this.rolePage.pageNum)
    },
    handleCurrentChange(val) {
      this.fetchData(val)
    },
    handleUserDataChange(val) {
      this.getUser(val)
    },
    getCompany() {
      selectCompany()
        .then((response) => {
          this.data = response.data
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '公司查询失败!'
          })
        })
      console.log(this.data)
    },
    // 获取资源树
    getResourceTree() {
      this.resourcedialogVisible = true
      const resourceQuery = {}
      resourceQuery.pageSize = 1000
      treeQuery(resourceQuery).then((response) => {
        // this.resourceData = response.data
        this.resourceData = this.transform(response.data)
      })
      const roleVo = this.$refs.roleTable.selection
      if (roleVo == null || roleVo.length === 0) {
        this.$message.error('至少选择一个角色进行操作')
        return
      }
      for (let i = 0; i < roleVo.length; i++) {
        this.roleIdList.push(roleVo[i].id)
      }
    },
    // 分配资源
    assignResource() {
      const list = this.$refs.tree.getCheckedNodes()
      const listParent = this.$refs.tree.getHalfCheckedKeys()
      // const listParent = this.$refs.tree.data
      listParent.map((item) => {
        this.resourceIdList.push(item)
      })

      for (let i = 0; i < list.length; i++) {
        this.resourceIdList.push(list[i].id)
      }
      this.resourcedialogVisible = false

      const userRoleDTO = {
        roleIds: this.roleIdList,
        resourceIds: this.resourceIdList
      }

      userRoleDTO.version = '1'
      userRoleDTO.createdBy = '2'
      userRoleDTO.tenantId = '1'
      userRoleDTO.companyId = '1'
      console.log(userRoleDTO)
      assignResource(userRoleDTO)
        .then((response) => {
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          this.resourceIdList = []
          this.roleIdList = []
          // 进行重新加载
          this.fetchData(1)
        })
        .catch(() => {
          this.$message({
            message: '分配失败',
            type: 'error'
          })
        })
      // this.resourcedialogVisible = false
      // const roleResource = {
      //   resourceId: this.$refs.tree.getCheckedKeys(),
      //   roleId: this.selection
      // }
      // const roleResourceDTO = new RoleResourceDTO(roleResource)
      // this.assignRole(roleResourceDTO).then(response => {
      //   this.$message({
      //     message: '分配成功',
      //     type: 'success'
      //   })
      //   // 进行重新加载
      //   this.fetchData()
      // })
    },
    // 增加角色
    addRole() {
      this.adddialogVisible = false
      this.roleDto.version = '1'
      this.roleDto.createdBy = '2'
      this.roleDto.tenantId = '1'
      this.roleDto.companyId = '1'
      this.roleDto.orgId = '1337376369553833984'
      add(this.roleDto)
        .then((response) => {
          // 新增之后重新加载
          this.fetchData(1)
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 通过名字查询
    queryRoleByName() {
      this.rolePage.total = null
      this.rolePage.pages = null
      this.rolePage.pageNum = 1
      this.fetchData(this.rolePage.pageNum)
    },
    // 批量删除
    batchRemoveRole() {
      const roleVo = this.$refs.roleTable.selection
      if (roleVo == null || roleVo.length === 0) {
        this.$message.error('至少选择一条进行操作')
        return
      }
      const roleDtoS = new Array(roleVo.length)
      for (let i = 0; i < roleVo.length; i++) {
        roleDtoS[i] = {
          id: roleVo[i].id,
          version: roleVo[i].version
        }
      }
      if (roleDtoS.length !== 0) {
        this.$confirm('确定删除记录吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            batchRemove(roleDtoS).then((response) => {
              this.fetchData(1)
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } else {
        this.$message({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
      }
    },
    // 删除角色
    removeRole(row) {
      this.$confirm('确定删除记录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove(row.id, row.version)
            .then((response) => {
              this.fetchData(1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    copyRole(row) {
      copy(row.id)
        .then((response) => {
          this.fetchData(1)
          this.$message({
            type: 'success',
            message: '复制成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '复制失败!'
          })
        })
    },
    // 修改信息展示
    updateFromInfo(row) {
      this.updatedialogVisible = true
      this.roleDto = row
      this.selected = row
    },
    // 修改角色
    updateRole() {
      this.updatedialogVisible = false
      modify(this.roleDto)
        .then((response) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          // 新增之后重新加载
          this.fetchData(1)
          // Just to simulate the time of the request
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        })
    },
    // 通过name查用户
    queryUserByName() {
      this.userPage.total = null
      this.userPage.pages = null
      this.userPage.pageNum = 1
      this.getUser(this.userPage.pageNum)
    },
    // 查询用户
    getUser(pageNum) {
      this.listLoading = true
      this.userQuery.total = this.userPage.total
      this.userQuery.pageNum = pageNum
      this.userQuery.pageSize = this.userPage.pageSize
      commonQueryUser(this.userQuery)
        .then((response) => {
          const { total, pageNum, pageSize, pages } = response // 如果异常则被axios 的拦截器拦截并且显示错误码和消息
          this.userPage.total = parseInt(total)
          this.userPage.pages = parseInt(pages)
          this.userData = response.data
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 分配用户
    assignUser() {
      // 关闭弹窗
      const userVo = this.$refs.userTable.selection
      if (userVo == null || userVo.length === 0) {
        this.$message.error('至少选择一个用户进行操作')
        return
      }
      for (let i = 0; i < userVo.length; i++) {
        this.userIdList.push(userVo[i].id)
      }
      this.userdialogVisible = false
      console.log(this.roleIdList)
      const userRoleDTO = {
        roleIds: this.roleIdList,
        userIds: this.userIdList
      }
      userRoleDTO.version = '1'
      userRoleDTO.createdBy = '2'
      userRoleDTO.tenantId = '1'
      userRoleDTO.companyId = '1'
      console.log(userRoleDTO)
      assignUser(userRoleDTO)
        .then((response) => {
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          this.userIdList = []
          this.roleIdList = []
          // 进行重新加载
          this.fetchData(1)
        })
        .catch(() => {
          this.$message({
            message: '分配失败',
            type: 'error'
          })
        })
    },
    // 查询所有用户
    getUserAll() {
      this.userdialogVisible = true
      const roleVo = this.$refs.roleTable.selection
      if (roleVo == null || roleVo.length === 0) {
        this.$message.error('至少选择一个角色进行操作')
        return
      }
      for (let i = 0; i < roleVo.length; i++) {
        this.roleIdList.push(roleVo[i].id)
      }
      this.getUser(this.userPage.pageNum)
    },
    // 关闭弹窗
    handleClose() {
      this.adddialogVisible = false
      this.updatedialogVisible = false
      this.userdialogVisible = false
      this.resourcedialogVisible = false
    },
    // eslint-disable-next-line no-dupe-keys,vue/no-dupe-keys
    refreshData() {
      this.fetchData(this.rolePage.pageNum)
    },
    fetchData(pageNum) {
      // debugger
      this.listLoading = true
      this.roleQuery.total = this.rolePage.total
      this.roleQuery.pageNum = pageNum
      this.roleQuery.pageSize = this.rolePage.pageSize
      commonQuery(this.roleQuery)
        .then((response) => {
          const { total, pageNum, pageSize, pages } = response // 如果异常则被axios 的拦截器拦截并且显示错误码和消息
          this.rolePage.total = parseInt(total)
          this.rolePage.pages = parseInt(pages)
          this.tableData = response.data
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}
.box-card {
  height: 500px;
}
</style>
